import * as React from 'react';

import * as StringHelper from '../MyHelper/StringHelper';
import * as Global from '../TS/Global';
import * as MyCfg from './MyCfg';
import { NetCfgList } from './netcfglist';

export interface NetcfgProps extends Global.Myprops { cfg: MyCfg.MsgCfg_net, index: number, viewparent: NetCfgList };

interface NetcfgState {
    cfg: MyCfg.MsgCfg_net;
    Ip_check?: boolean;
    Mask_check?: boolean;
    Gateway_check?: boolean;
    MAC_check?: boolean;
    IsCheck?: boolean;


};

export class Netcfg extends React.Component<NetcfgProps,
    NetcfgState> {
    constructor(props) {
        super(props);
        //设置状态
        this.state = {
            cfg: props.cfg,
            Ip_check: true,
            Mask_check: true,
            Gateway_check: true,
            MAC_check: true,
            IsCheck: true,

        };

    }
    componentWillReceiveProps(nextProps) {
        this.setState({ cfg: nextProps.cfg });
    }
    mytest(str: string) {
        console.log("Netcfg" + str);
    }
    public handleClick(event: any): void {
        event.preventDefault();
        console.log("save");
    }
    public handleChange(event: any, sourcetype: string = null): void {

        let alltcfg: any = {};
        let tcfg: any = this.state.cfg;
        if (!sourcetype) {
            tcfg[event.target.name] = event.target.value;
        } else if (sourcetype == "checkbox") {
            tcfg[event.target.name] = event.target.checked;
        }
        let namexxx = event.target.name;
        if (namexxx == "Ip" || namexxx == "Gateway" || namexxx == "Mask") {
            alltcfg[namexxx + "_check"] = true;
            if (!StringHelper.IsIP(event.target.value)) {

                alltcfg[namexxx + "_check"] = false;
            }
        } else if (namexxx == "MAC") {
            alltcfg[namexxx + "_check"] = true;
            if (!StringHelper.IsMac(event.target.value)) {

                alltcfg[namexxx + "_check"] = false;
            }
        }

        alltcfg["cfg"] = tcfg;
        this.setState(alltcfg, () => {

            let _Ischeck: boolean = false;
            if (this.state.Gateway_check && this.state.Ip_check && this.state.MAC_check && this.state.Mask_check) {
                _Ischeck = true;
            }
            this.setState({
                IsCheck: _Ischeck
            }, () => {
                this
                    .props
                    .viewparent
                    .CheckInput();
            });
        });

    }
    public GetCheck(): boolean { return this.state.IsCheck; }
    public GetState(): MyCfg.MsgCfg_net { return this.state.cfg; }
    public render(): JSX.Element {
        return (
            <div className="col-xs-12 col-sm-6">
                <div className="panel panel-info ">
                    <div className="panel-heading">
                        <h3 className="panel-title">{Global.GetLocal("网口")} {`${this.props.index + 1}`}
                            {Global.GetLocal("参数设置")}
                            [{this.props.cfg.NetName}]</h3>
                    </div>
                    <div className="panel-body">

                        <form className="form-horizontal" role="form">
                            <div className="form-group">

                                <label className="col-xs-4 control-label">{Global.GetLocal("IP获取方式")}</label>

                                <div className="col-xs-8">
                                    <select
                                        className="form-control"
                                        name="IPMethod"
                                        value={this.state.cfg.IPMethod}
                                        onChange={e => this.handleChange(e)}>
                                        <option value='0'>{Global.GetLocal("静态")}</option>
                                        <option value='1'>DHCP</option>
                                    </select>

                                </div>
                            </div>

                            <div
                                className={this.state.Ip_check
                                    ? "form-group "
                                    : "form-group has-error has-feedback"}>

                                <label className="col-xs-4 control-label">{Global.GetLocal("IP地址")}</label>
                                <div className="col-xs-8">
                                    <input
                                        type="text"
                                        name="Ip"
                                        value={this.state.cfg.Ip}
                                        onChange={e => this.handleChange(e)}
                                        className="form-control"
                                        placeholder=" " disabled={this.state.cfg.IPMethod == "1"} />
                                    <span
                                        className={this.state.Ip_check
                                            ? "hidden"
                                            : "glyphicon glyphicon-remove form-control-feedback"}></span>
                                    <br
                                        className={this.state.Ip_check
                                            ? "hidden"
                                            : ""} />
                                    <div
                                        className={this.state.Ip_check
                                            ? "alert alert-danger hidden"
                                            : "alert alert-danger "}
                                        role="alert">{Global.GetLocal("请输入正确的IP")}</div>
                                </div>
                            </div>
                            <div className="form-group">

                                <label className="col-xs-4 control-label">{Global.GetLocal("子网掩码")}</label>
                                <div
                                    className={this.state.Mask_check
                                        ? "col-xs-8 "
                                        : "col-xs-8 has-error has-feedback"}>
                                    <input
                                        type="text"
                                        className="form-control"
                                        placeholder=" "
                                        name="Mask"
                                        value={this.state.cfg.Mask}
                                        onChange={e => this.handleChange(e)}
                                        disabled={this.state.cfg.IPMethod == "1"} />
                                    <span
                                        className={this.state.Mask_check
                                            ? "hidden"
                                            : "glyphicon glyphicon-remove form-control-feedback"}></span>
                                    <br
                                        className={this.state.Mask_check
                                            ? "hidden"
                                            : ""} />
                                    <div
                                        className={this.state.Mask_check
                                            ? "alert alert-danger hidden"
                                            : "alert alert-danger "}
                                        role="alert">{Global.GetLocal("请输入正确的子网掩码")}</div>

                                </div>
                            </div>
                            <div className="form-group">

                                <label className="col-xs-4 control-label">{Global.GetLocal("网关")}</label>
                                <div
                                    className={this.state.Gateway_check
                                        ? "col-xs-8 "
                                        : "col-xs-8 has-error has-feedback"}>
                                    <input
                                        type="text"
                                        className="form-control"
                                        placeholder=" "
                                        name="Gateway"
                                        value={this.state.cfg.Gateway}
                                        disabled={this.state.cfg.IPMethod == "1"}
                                        onChange={e => this.handleChange(e)} />
                                    <span
                                        className={this.state.Gateway_check
                                            ? "hidden"
                                            : "glyphicon glyphicon-remove form-control-feedback"}></span>
                                    <br
                                        className={this.state.Gateway_check
                                            ? "hidden"
                                            : ""} />
                                    <div
                                        className={this.state.Gateway_check
                                            ? "alert alert-danger hidden"
                                            : "alert alert-danger "}
                                        role="alert">{Global.GetLocal("请输入正确的网关")}</div>
                                </div>
                            </div>

                            <div className="form-group">

                                <label className="col-xs-4 control-label">{Global.GetLocal("修改MAC")}</label>

                                <div className="col-xs-8">
                                    <div className="checkbox form-check">
                                        <label>
                                            <input
                                                type="checkbox"
                                                className="form-check"
                                                value=""
                                                name="IsSetMac"
                                                checked={this.state.cfg.IsSetMac}
                                                onChange={e => this.handleChange(e, "checkbox")} /> {Global.GetLocal("修改")}
                                        </label>
                                    </div>

                                </div>
                            </div>
                            <div className="form-group">

                                <label className="col-xs-4 control-label">MAC</label>
                                <div
                                    className={this.state.MAC_check
                                        ? "col-xs-8 "
                                        : "col-xs-8 has-error has-feedback"}>
                                    <input
                                        disabled={!this.state.cfg.IsSetMac}
                                        type="text"
                                        className="form-control"
                                        placeholder=" "
                                        name="MAC"
                                        spellCheck={false}
                                        value={this.state.cfg.MAC}
                                        onChange={e => this.handleChange(e)} />
                                    <span
                                        className={this.state.MAC_check
                                            ? "hidden"
                                            : "glyphicon glyphicon-remove form-control-feedback"}></span>
                                    <br
                                        className={this.state.MAC_check
                                            ? "hidden"
                                            : ""} />
                                    <div
                                        className={this.state.MAC_check
                                            ? "alert alert-danger hidden"
                                            : "alert alert-danger "}
                                        role="alert">{Global.GetLocal("请输入正确的MAC")}</div>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        )
    }
}